<template>
  <div id="app">
    <Add @add='Appadd'/>
    <List :data="showlist"
      @modify="modifyaction"
    />
    <Handler @select="handlerSelect" :kk="select"/>
  </div>
</template>

<script>
import Add from "./components/Add"
import List from "./components/List"
import Handler from "./components/Handler"

export default {
  components:{
    Add,
    List,
    Handler
  },
  data(){
    return{
      liebiao:[],
      select:"all",
    }
  },
  computed:{
    showlist(){
      return this.select==="all"?this.liebiao:this.liebiao.filter((item)=>{
        return item.statuse===this.select
      })
    }
  },
  methods: {
    Appadd(a){
      this.liebiao.push({
        id:new Date().getTime(),
        content:a,
        statuse:"todo"
      })
    },
    modifyaction(id){
        const index=this.liebiao.findIndex((item)=>{
          return item.id===id
        })
        this.liebiao[index].statuse="finished"
    },
    handlerSelect(id){
      this.select=id
      console.log(id);
    }
  },
}
</script>

<style>

</style>
